<template>
  <el-card class="box-card">
    <a :href="video" target="_blank"><img :src="cover[0]" alt="" /></a>
    <div class="moment_detail">
      <p class="p1">{{ title }}</p>
      <p class="p2">{{ statisticsBackup.viewCount }}人浏览</p>
      <div class="box1">
        <span>
          <el-icon size="14" color="#b1b5c1"> <Pointer /> </el-icon>
          {{ statisticsBackup.praiseCount }}
        </span>
        <span
          ><el-icon size="14" color="#b1b5c1"> <ChatDotSquare /> </el-icon
          >{{ statisticsBackup.commentCount }}</span
        >
        <span
          ><el-icon size="14" color="#b1b5c1"> <Star /> </el-icon>
          {{ statisticsBackup.favoriteCount }}</span
        >
      </div>
      <div class="box2">
        <img :src="creatorBackup.avatar" alt="" />
        <span>{{ creatorBackup.name }}</span>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { Pointer, ChatDotSquare, Star } from "@element-plus/icons-vue";

export default defineComponent({
  name: "ResourcesItem",
});
</script>

<script setup lang="ts">
interface propsDataType {
  cover: string[];
  title: string;
  statisticsBackup: {
    actualSellCount: number;
    commentCount: number;
    enquiryCount: number;
    exposureCount: number;
    favoriteCount: number;
    liveStatus: number;
    lockCount: number;
    playBackDuration: number;
    praiseCount: number;
    requireAccessoryCount: number;
    requireLiveCourseCount: number;
    requireMajorCourseCount: number;
    requireMusicCount: number;
    requireVideoCourseCount: number;
    reviewCount: number;
    sellAmount: number;
    sellCount: number;
    shareAmount: number;
    shareCount: number;
    signupCount: number;
    studentCount: number;
    userCacheCount: number;
    viewCount: number;
  };
  creatorBackup: {
    avatar: string;
    certificationType: string;
    id: string;
    level: number;
    name: string;
    vipExpireTime: number;
    vipGrade: number;
  };
  video: string;
}

defineProps<propsDataType>();
</script>

<style lang="less" scoped>
.box-card {
  width: 224px;
  height: 280px;
  margin-bottom: 10px;
  font-size: 14px;
  text-align: left;

  :deep(.el-card__body) {
    padding: 0;

    img {
      width: 224px;
      height: 125px;
    }

    .moment_detail {
      padding: 0 5px;
      .p1 {
        height: 40px;
        padding-top: 5px;
        font-size: 14px;
      }
      .p2 {
        font-size: 12px;
        color: #b1b5c1;
        line-height: 32px;
      }

      .box1 {
        padding-bottom: 8px;
        border-bottom: 1px solid #b1b5c1;
        span {
          color: #b1b5c1;
          margin-right: 15px;
        }
      }

      .box2 {
        padding-left: 10px;
        height: 46px;
        line-height: 46px;
        img {
          display: inline-block;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 10px;
        }
        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
